<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="my">我的</el-menu-item>
      <el-menu-item index="department" v-if="customerReceivablesForDepartment">部门</el-menu-item>
      <el-menu-item index="all" v-if="customerReceivablesForAll">全部</el-menu-item>
    </el-menu>

    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px">
        <el-form-item label="订单日期：" label-width="80px">
          <el-date-picker
            v-model="listQuery.date"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="客户名称："  >
          <el-select
            clearable
            v-model="listQuery.customerId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单号：">
          <el-input v-model="listQuery.orderSn" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门/事业部/人员：" v-if="listQuery.tab != 'my'">
          <el-cascader
            collapse-tags
            :show-all-levels="false"
            v-model="listQuery.userIds"
            placeholder="请选择部门/事业部/人员"
            :options="userList"
            :props="props"></el-cascader>
        </el-form-item>
        <el-form-item label="是否逾期："  >
          <el-select clearable v-model="listQuery.isOutTimeNeedPay">
            <el-option label="是" value="1"> </el-option>
            <el-option label="否" value="0"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--数据列表-->
    <div style="font-size:14px;line-height: 30px;padding:10px 0 ">
      应收金额(未逾期未付金额)<b style="padding:0 5px">{{ unOutTimeNeedPaidAmount }}</b>元，逾期应收金额(逾期未付金额)<b style="padding:0 5px;color:red">{{ outTimeNeedPayAmount }}</b>元，合计应收<b style="padding:0 5px">{{ needPayAmount }}</b>元。
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="listQuery.tab2" size="small" @change="handleSearchList">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="hasShip">已出库</el-radio-button>
        <el-radio-button label="hasCheck">己审核未出库</el-radio-button>
        <el-radio-button label="unCheck">未审核</el-radio-button>
      </el-radio-group>
    </div>
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%; ">
        <el-table-column
          align="center"
          label="客户名称"
          width="300">
          <template slot-scope="scope">
            <div>{{scope.row.customerName}}</div>
          </template>
        </el-table-column>
        <el-table-column  label="订单号" width="180" align="center">
          <template slot-scope="scope">
            <el-link  @click="toDetail(scope.row)" type="primary">{{scope.row.orderSn}}</el-link>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="销售员"
          width="100">
          <template slot-scope="scope">
            {{scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="部门/事业部"
          width="200"
          align="center">
        </el-table-column>
        <el-table-column
          prop="orderRemark"
          label="结算方式"
          width="300">
        </el-table-column>
        <el-table-column
          prop="orderDate"
          label="订单日期"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="lastPaidDate"
          label="合同截止付款时间"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="unOutTimeNeedPaidAmount"
          label="应收金额(未逾期未付金额)"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="outTimeNeedPaidAmount"
          label="逾期应收金额(逾期未付金额)"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="outTimeDayNum"
          label="逾期付款天数"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="customerOutTimePayNum"
          label="过往逾期次数"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          min-width="100">
          <template slot-scope="scope">
            <el-button
              v-if="listQuery.tab != 'my' && addSaleWorkOrder"
              type="text"
              size="mini"
              @click="workOrder(scope.row)">发布工单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

    <!-- 发布工单 -->
    <addWorkOrder ref="addWorkOrder"></addWorkOrder>
  </div>
</template>
<script>
import addWorkOrder from '@/views/components/addWorkOrder';
import {saleUserList} from '@/api/data.js'
  import {getCustomerOption,needPayOrderList} from '@/api/partner'
  import {goodsList,invoiceListNew,invoiceExportNew} from '@/api/company'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'
import addGj from "../fms/components/addGj";
import moveCutomer from "../fms/components/moveCutomer";
import popFollow from "../fms/components/popFollow";
import settingCustomer from "../fms/components/settingCustomer";
import outboundCall from "../fms/components/outboundCall";
import addManageFms from "../fms/components/addManageFms";
  const defaultListQuery={
    "tab" : "my", //我的-my,部门-department，全部-all
    "date" : [],  //下单时间
    "userIds" : [],  //业务员
    "orderSn" : "", //订单号
    "customerId" : '',//客户ID
    tab2:'all',
    "pageNum" : 1,
    "pageSize" : 10,
    isOutTimeNeedPay:'',
  };
  export default {
    name: "index",
    data(){
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        tableData: [],
        listLoading: false,
        userOptionList:[],
        roles:store.getters.roles ? store.getters.roles : [],
        loading:false,
        btnloading:false,
        count:0,
        customerList:[],
        props:{multiple: true,label:'value',value:'label',emitPath:false},
        userList:[],
        needPayAmount:0,
        outTimeNeedPayAmount:0,
        unOutTimeNeedPaidAmount:0
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId',
        'isMange',
      ]),
      customerReceivablesForDepartment(){
        if(this.roles.indexOf("customerReceivablesForDepartment") != -1){
          return true
        }else{
          return false
        }
      },
      customerReceivablesForAll(){
        if(this.roles.indexOf("customerReceivablesForAll") != -1){
          return true
        }else{
          return false
        }
      },
      addSaleWorkOrder(){
        if(this.roles.indexOf("addSaleWorkOrder") != -1){
          return true
        }else{
          return false
        }
      },
    },
    components : {
      addWorkOrder,
    },
    created() {
      if(this.$route.query.tab){
        this.listQuery.tab = this.$route.query.tab
      }
      if(this.$route.query.orderSn){
        this.listQuery.orderSn = this.$route.query.orderSn
      }
      let nowdate  = formatDate(new Date(),'yyyy-MM-dd');
      this.listQuery.date = ['2024-01-01',nowdate];
      this.getList();
      this.getUserList();
    },
    filters: {

    },
    methods:{
      //提交工单
      workOrder(row){
        this.$refs.addWorkOrder.showPop('customerNeedPay',row.orderId,row.customerName,row.userName)
      },
      //去详情页
      toDetail(item){
        let routeData = this.$router.resolve({name:'saleDetail',query:{id:item.orderId,type:'see'}});
        window.open(routeData.href);
      },
      getUserList(){
        saleUserList().then((res)=>{
          this.userList = res
        })
      },
      //查询获取客户列表
      remoteMethod(query) {
        if(query && query!= ''){
          this.loading = true;
          getCustomerOption({keywords:query}).then(response => {
            this.customerList = response;
            this.loading = false;
          }).catch(()=>{
            this.loading = false;
          });
        }
      },

      /**
       * 切换选择状态
       */
      handleSelect(key, keyPath){
        this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
        this.listQuery.tab = key;
        let nowdate  = formatDate(new Date(),'yyyy-MM-dd');
        this.listQuery.date = ['2024-01-01',nowdate];
        this.handleSearchList();
      },

      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      //获取列表
      getList() {
        this.listLoading = true;
        let data = JSON.parse(JSON.stringify(this.listQuery))
        data.userIds = data.userIds.join(",")
        needPayOrderList(data).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.needPayAmount = response.needPayAmount //应收金额
          this.outTimeNeedPayAmount = response.outTimeNeedPayAmount//逾期应付金额
          this.unOutTimeNeedPaidAmount =  response.unOutTimeNeedPaidAmount  //未逾期应付金额
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
      },
    },
  }
</script>
